<template>
<div class="header-box">
  <el-menu
    style="height: 70px;position: fixed;position: fixed;top: 0;left: 0;width: 100%;"
    class="el-menu-demo"
    mode="horizontal"
    :default-active="defaultActive"
    router>
    <el-menu-item>
      <img class="logo"  src="../assets/img/hbfuLOGO.jpg" alt="">
    </el-menu-item>
    <el-menu-item index="/index/home">首页</el-menu-item>
    <el-menu-item index="/index/guide">投资向导</el-menu-item>
    <el-menu-item index="/index/product" >全部金融产品</el-menu-item>
    <el-menu-item index="/index/order">我的订单</el-menu-item>
    <el-menu-item index="/index/about">金融论坛</el-menu-item>
    <el-menu-item style="float: right">
      <div class="header-right">
        <!--<el-input v-model="keyWord" placeholder="                                  请输入"></el-input>-->
        <!--<el-button class="search-btn" icon="el-icon-search" circle size="mini" ></el-button>-->
        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">{{username}}   <i class="el-icon-caret-bottom"></i> </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="info">个人信息</el-dropdown-item>
            <el-dropdown-item command="comment">联系我们</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      
    </el-menu-item>
  </el-menu>
</div>
</template>

<script>
import axios from "axios";
axios.defaults.withCredentials = true
export default {
  name: "Header",
  data(){
    return{
      keyWord: ''
    }
  },
  computed: {
    defaultActive(){
      // let string = this.$route.path.split('/')[2];
      // return string === 'info' ? 'home' : string
      if (this.$route.path.split('/')[2] === 'about'){
        return '/index/about'
      }else if (this.$route.path.split('/')[2] === 'info'){
        return '/index/home'
      }
      return this.$route.path
    },
    username(){
      return localStorage.getItem("username")
    }
  },
  methods: {
    handleCommand(command){
      if (command === 'logout'){
        //退出登录
        localStorage.clear()
        axios.get('/FinancialRecommend/user/logout').then(response => {
          this.$message({
            message: response.data.msg,
            type: 'success',
          })
        })
        this.$router.push("/")
      }else if (command === 'info' && this.$route.path !== '/index/info'){
          this.$router.push('/index/info')
      }else{
        console.log('评论留言')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.header-box{
  position: relative;
  z-index: 20;
}
.logo{
  width: 68px;
  height: 68px;
  margin: 0 30px;
  padding: 0 0;
}
.header-right{
  height: 50px;
  display: flex;
}
.search-btn{
  height: 40px;
  width: 40px;
  margin: 10px 100px  0   10px;
}
*{
  margin: 0 0;
  padding: 0 0;
}
</style>
